<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
	
	<title>图片分享社区 </title>
	<link href="${pageContext.request.contextPath}/CSS/animate.min.css" rel="stylesheet"/>
	 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/CSS/bootstrap.css" />
		<link href="${pageContext.request.contextPath}/CSS/base.css" rel="stylesheet">
	<style type="text/css">
		html,body{
			height:100%;

		}
		
		.top{
	   
	  	 height:80px;
		 background:#8B8682;
	   
		}
		
		
		.main{
		 width: 100%;
            	max-width:500px;
           	 height: 500px;
           	 position: absolute;
           	 top: 50%;
          	  margin-top: -210px;
        
		}

		@media screen and (min-width:500px){
            	.main{
            	    left: 50%;
              	 
               	 margin-left: -250px;
          	  }
     	   }
		.bottom{
	   	  height:80px;
		  background:#8B8682;
		}

		 .form {
            width: 100%;
            max-width:500px;
            height: 375px;
            margin: 25px auto 0px auto;
            padding-top: 25px;
        }
        .login-content {
            height: 350px;
            width: 100%;
            max-width:500px;
  background-color: rgba(255, 250, 2550, .9);
            float: left;
        }


        .input-group {
            margin: 0px 0px 30px 0px !important;
        }
        .form-control,
        .input-group {
            height: 40px;
        }

        .form-group {
            margin-bottom: 0px !important;
        }
        .login-title {
            padding: 20px 10px;
             background-color: #2196f3;
        }
        .login-title h1 {
            margin-top: 10px !important;
        }
        .login-title small {
            color: #fff;
        }

        .link p {
            line-height: 20px;
            margin-top: 30px;
        }
        .btn-sm {
            padding: 8px 24px !important;
            font-size: 16px !important;
        }
	</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container" >
        <div class="navbar-header">
          <a class="navbar-brand" href="fonthead.action">
						<span class="nav-title">图片分享社区</span>
					</a>
        </div>

        <div id="navbar" class="navbar-collapse collapse" >
          <div class="navbar-form navbar-right">
						<li class="dropdown" >
			        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
								<s:if test="#session.IMG==null">
								<img class="img-circle" style="height: 40px;" src="${pageContext.request.contextPath}/IMG/headimg.jpg">
							</s:if>
							<s:else>
							<img class="img-circle" style="height: 40px;" src='<s:property value="#session.IMG"/>'>
							</s:else>
							</a>
						
						<s:if test="#session.ID==null">
			        <ul class="dropdown-menu">
			         <li><a href="loginfont.action">登陆</a></li>
			           <li role="separator" class="divider"></li>
			           <li><a href="registerpage.action">注册</a></li>
			    
			        </ul>
			        </s:if>
			        <s:else>
			         <ul class="dropdown-menu">

			      <li><a href="userprofile.action?id=<s:property value="#session.ID"/>">个人主页</a></li>
			          <li role="separator" class="divider"></li>
			              <li><a href="alelterpassword.action">修改密码</a></li>
			           <li role="separator" class="divider"></li>
			          <li><a href="logoutfont.action">注销</a></li>
			        </ul>
			        </s:else>
			      </li>
          </div>
        </div>
      </div>
    </nav>
<div class="container ">
	<div class="main animated flipInX">
		<div class="login-title text-center">
            <h1><small>账号注册</small></h1>
        </div>
        <div class="login-content ">
            <div class="form">
                <form action="userregister.action"  onsubmit="return check()" method="post">
                    <div class="form-group">
                        <div class="col-xs-12  ">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 用&nbsp;&nbsp;户名</span>
                                <input type="text" id="username" maxLength="12" name="user.username" class="form-control" placeholder="请输入用户名" >
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12  ">
                            <div class="input-group">
                              <span class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</span>
                                <input type="password" id="userpassword" maxLength="12" name="user.password" class="form-control" placeholder="请输入密码" >
                            </div>
                        </div>
                    </div>
		                <div class="form-group">
                        <div class="col-xs-12  ">
                            <div class="input-group">
                              <span class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span>确认密码</span>
                                <input type="password" name="confimpassword"  id="confimpassword" class="form-control" placeholder="请确认输入用户密码" />
                            </div>
                            <span style="display:none;color:red;text-align:center;" id="info">*用户密码和确认密码不一致</span>
                        </div>
                    </div>
                    
                    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox" checked="checked"><span style="color:black;">我已阅读并同意</span>
        <a   data-toggle="modal" data-target="#Modal">《图片分享社区用户注册协议》</a>
        </label>

      </div>
    </div>
  </div>
                    <div class="form-group form-actions">
                        <div class="col-xs-12">
                            <button id="register" type="submit" class="btn btn-primary form-control"><span class="glyphicon"></span>注册</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
	</div>
	
</div>
	<br/>
<br/>
        <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">用户注册协议</h4>
            </div>
            <div class="modal-body">
            <span><p class="text-info" style="font-size:13pt;">1:不得上传非法图片</p>
            <p class="text-info" style="font-size:13pt;">2:不得侵犯他人隐私</p>
            </span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>          
            </div>
        </div>
    </div>
</div>
 <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel" style="text-align:center;">操作提示</h4>
      </div>
      <div class="modal-body">
                     <h5 style="text-align:center;">请填写完整表单！！</h5>
      </div>
      <div class="modal-footer">
    
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
        <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">用户注册协议</h4>
            </div>
            <div class="modal-body">
            <span><p class="text-info" style="font-size:13pt;">1:不得上传非法图片</p>
            <p class="text-info" style="font-size:13pt;">2:不得侵犯他人隐私</p>
            </span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>          
            </div>
        </div>
    </div>
</div>
 <!-- Modal -->
<div class="modal fade" id="my" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel" style="text-align:center;">操作提示</h4>
      </div>
      <div class="modal-body">
                     <h5 style="text-align:center;">密码与确认密码不相同</h5>
      </div>
      <div class="modal-footer">
    
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
		<!--footer-->
<footer>
    <div class="container" style="text-align:center">
        <div class="row">
            <div class="col-md-12">
                <p>
                    Copyright&nbsp;©&nbsp;2012-2015&nbsp;&nbsp;www.sharephoto.com&nbsp;&nbsp;粤ICP备13014270号-4
                </p>
            </div>
        </div>
    </div>
</footer>
<!--footer-->
		<script src="${pageContext.request.contextPath}/JS/jquery-1.12.3.min.js"></script>
<script src="${pageContext.request.contextPath}/JS/bootstrap.min.js"></script>
<script type="text/javascript">
function validpassword(){
var password=$("#userpassword").val();
var confimpassword=$("#confimpassword").val();
if(password!==confimpassword){
$("#info").css("display","block");
$("#register").attr("disabled",true); 
}
else{
$("#info").css("display","none");
$("#register").attr("disabled",false); 
}
}
    $(function(){
        $('#username').focus();
    });
    
     function check(){
   if($("#userpassword").val().trim()=="" ||$("#confimpassword").val().trem==""||$("#username").val().trem==""){
   $("#myModal").modal("show");
   return false;
   }else{
   if($("#userpassword").val().trim()!==$("#confimpassword").val().trim()){
     $("#my").modal("show");
  return false; 
  }
  else{
  return true;}
   }
  };
    </script>
</body>

</html>